<template>
	<view class="store">
		<!-- position: fixed; -->
		<view class="topFixed" style="width: 100%;position:fixed;top:0;background-size: 100% auto;z-index: 999;">
			<view class="" style="background:#fff;">
				<view class="" :style="'height:'+navBarInfo.statusBarHeight+'px;'">

				</view>
				<!-- width:'+navBarInfo.navBarWidth+'px; -->
				<view class="flex align-center justify-between"
					:style="'height:'+navBarInfo.navBarHeight+'px;'">
					<!-- <view class=" flex align-center" @click="onLocation" style="font-size: 30rpx;margin-left: 40rpx;">
						<image style="width: 34rpx;height: 34rpx;" src="../../static/Group 3819.png" mode=""></image>
						<text class="city text-overflow1">{{positionText?positionText:address?address:'请选择'}}</text>
						<image style="width: 28rpx;height: 28rpx;" src="../../static/xiajiantou.png" mode=""></image>
					</view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx;color: #fff;"
						:style="'width:'+navBarInfo.navBarContentWidth+'px;'">
						<view class="flex align-center" style="background: #fff;border-radius: 32rpx;">
							<view @click="changeRange(0)"
								style="padding: 12rpx 30rpx;border: 2rpx solid #fff;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==0?'color:#ffffff;background:#EBBF88;':''">
								同城
							</view>
							<view @click="changeRange(1)"
								style="padding: 12rpx 30rpx;border: 2rpx solid #fff;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==1?'color:#ffffff;background:#EBBF88;':''">
								全国
							</view>
						</view>
					</view> -->
					<view @click="onLocation" class="flex flex-1 align-center" style="">
						<view style="font-size: 0;padding-left: 24rpx;">
							<image style="width: 42rpx;height: 42rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/dingwei.png" mode=""></image>
						</view>
						<view class="text-overflow1" style="font-size: 30rpx;color: #333333;">
							{{positionText?positionText:address?address:'请选择'}}
						</view>
						<view style="font-size: 0;">
							<image style="width: 22rpx;height: 22rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/downArrow.png" mode=""></image>
						</view>
					</view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx;color: #fff;">
						<view class="flex align-center" style="background: #f4f4f4;border-radius: 32rpx;">
							<view @click="changeRange(0)"
								style="padding: 12rpx 30rpx;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==0?'color:#ffffff;background:#EBBF88;':''">
								同城
							</view>
							<view @click="changeRange(1)"
								style="padding: 12rpx 30rpx;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==1?'color:#ffffff;background:#EBBF88;':''">
								全国
							</view>
						</view>
					</view>
					<view class="flex-1">
					
					</view>
				</view>
				<view class="search flex justify-center z-index:9999;">
					<view class="tips">
						{{brandParams.sort == 'views'?'人气最高区':brandParams.sort == 'updatetime'?'最新入场区':brandParams.sort == 'score'?'评分最高区':'全部品牌'}}
					</view>
					<view class="search_box">
						<image style="width: 40rpx;height: 36rpx;" src="../../static/fangdajing.png" mode=""></image>
						<div class="line">

						</div>
						<input placeholder="商品名/品牌/商品种类/关键字" type="text">
					</view>
				</view>
				<!-- <view class="flex flex-column align-center justify-around"
					style="padding-bottom: 28rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;">

				</view> -->

				<view :class=""
					:style="tabisTrue?'display:flex;padding-left: 32rpx; height:40rpx;background-color: #fff;':'display:flex;padding-left: 32rpx; height:40rpx;background-color: #fff;'">

					<scroll-view style="white-space: nowrap;font-size: 0;width:750rpx;overflow:hidden;"
						scroll-with-animation scroll-x="true" :scroll-into-view="'t' + tid">
						<view style="display: inline-block;margin-right: 52rpx;" @click="onActive(item.id)"
							v-for="(item,index) in navsList" :key="index">
							<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
								<view :class="navIndex==item.id?'flex align-center active_item':'flex align-center'"
									:style="navIndex == item.id?'font-weight:700;':''"
									style="font-size: 26rpx;color: #333;">
									{{item.name}}
								</view>
								<!-- <view class="" v-if="navIndex == item.id"
									style="width: 36rpx;height: 6rpx;background: #fff;margin-top: 12rpx;">

								</view> -->
							</view>
						</view>
					</scroll-view>
					<view class="fenlei_box" @click="onXianS" style="">
						<image style="width: 34rpx;height: 34rpx;" src="@/static/store/fenglei2.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view :style="'height:'+topFixedHeight+'px;'">

		</view>
		<view class="brand_box">
			<div v-for="item in brandList"  :key="item.id" @click="toShop(item)" class="brand_item">
				<!-- <image style="width: 126rpx;height:126rpx;margin-right: 24rpx;" :src="img_url+item.image"
					mode="aspectFill"></image> -->
					<image style="width: 126rpx;height:126rpx;margin-right: 24rpx;" :src="item.brands.image"
						mode="aspectFill"></image>
				<div class="center">
					<!-- <div class="item_title">
						{{item.name}}
					</div> -->
					<div class="item_title">
						{{item.brands.name}}
					</div>
					<div class="num">商家：{{item.shop_num}}家 | 商品数：{{item.goods_num}}件 </div>
					<div class="num">好评率：{{item.praise}}%</div>
				</div>
				<div class="num" style="position: absolute;bottom:32rpx;right:24rpx;">浏览量：{{item.views}}</div>
			</div>
		</view>
		<view class="fu_chuang" v-if="show" @click="close">
			<view class="c_fu_chuang mar-auto">
				<view class="c_fu_txt_box flex">
					<view class="list_txt" v-for="(item,index) in navsList" :key="index" @click="fuActive(item.id)">
						<view class="fu_txt s28">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import app from '../../App.vue'
	export default {
		data() {
			return {
				// 搜索关键词
				searchValue: '',
				navIndex: 502,
				screenIndex: 0,
				tid: 1,
				keyWord: '',
				show: false,
				storeList: [],
				img_url: 'https://sz.vvv5g.com',
				screenList: [
					{
						name: '销量'
					},
					{
						name: '口碑'
					},
					{
						name: '距离'
					}
				],
				tabisTrue: false,
				navsList: [],
				longitude: '',
				latitude: '',
				address: '',
				statusbarHeight: 0,
				navBarInfo: {},
				topFixedHeight: 0,
				rangeIndex: 1, //0 同城 1 全国
				brandParams: {
					sort: '',
					order: 'desc',
					page: 1,
					limit: 10,
					category_id: 502,
					keywords: '',
				},
				brandList: []
			}
		},
		onLoad(query) {
			if (query.sort) {
				this.brandParams.sort = query.sort
			}
			this.getNavsList()
			this.changeRange(this.rangeObj.goods)
			this.navBarInfo = this.$navBarInfo
			let that = this
			const sysres = uni.getSystemInfoSync()
			that.statusbarHeight = sysres.statusBarHeight
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.topFixed').boundingClientRect(data => {
					this.topFixedHeight = data.height
				}).exec()
			}, 300)
		},
		computed:{
			address2() {
				return this.$store.state.getLocation.address2
			},
			// 选择的位置
			positionText() {
				return this.$store.state.getLocation.positionText
			},
			selectedAddress(){
				return this.$store.state.getLocation.selectedAddress
			},
			//选择位置经纬度
			lat(){
				return this.$store.state.getLocation.lat
			},
			lng(){
				return this.$store.state.getLocation.lng
			},
			rangeObj() {
				return this.$store.state.getLocation.rangeObj
			},
			selectionCitys() {
				return uni.getStorageSync('selectionCity')
			},
			...mapState(['icon'])
		},
		onShow() {
			this.address = '定位中'
			this.$getLocation().then(res => {
				this.$request({
					url: 'common/getLocation',
					data: {
						lat: res.latitude,
						lng: res.longitude
					}
				}).then(jes => {
					this.address = jes.data.data.address_component.city
				})
			})
		},
		watch: {
			// 此处监听variable变量，当期有变化时执行
			rangeObj(newData,oldData) {
				// item1为新值，item2为旧值
				this.changeRange(newData.goods)
			}
		},
		mounted() {

		},
		onPageScroll(e) {
			if (e.scrollTop > this.topFixedHeight) {
				this.tabisTrue = true
			} else {
				this.tabisTrue = false
			}
		},
		onPullDownRefresh() {

		},
		methods: {
			toShop:function(item){
				uni.navigateTo({
					url:`/pages/index/brandShop?id=${item.id}&name=${item.name}`
				})
			},
			onLocation() {
				uni.navigateTo({
					url: '/pages/filePages/onLocation/onLocation'
				})
			},
			onActive(id) {
				this.navIndex = id
				this.tid = id
				this.brandParams.category_id = id
				this.getBrandList()
			},
			fuActive(id) {
				this.tid = id
				this.navIndex = id
				this.show = !this.show
				this.brandParams.category_id = id
				this.getBrandList()
			},
			onXianS() {
				this.show = !this.show
			},
			close() {
				this.show = false
			},
			changeRange(e) {
				this.rangeIndex = e
				this.brandParams.page = 1
				this.getBrandList()
			},
			// 调取导航
			getOpenLoaction(latitude, longitude) {
				if (!latitude && !longitude) {
					uni.showToast({
						title: "当前店铺未开启定位！",
						icon: "none"
					})
					return false
				}
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: function() {

					},
					fail(error) {

					}
				});
			},
			// 获取品牌列表
			getBrandList: function() {
				let latitude = uni.getStorageSync('location').latitude;
				let longitude = uni.getStorageSync('location').longitude;
				this.$request({
					url: 'brand_list/list',
					method: 'POST',
					data: {
						sort: this.brandParams.sort ? this.brandParams.sort : '',
						order: this.brandParams.order,
						page: this.brandParams.page,
						limit: this.brandParams.limit,
						category_id: this.brandParams.category_id == 502 ? '' : this.brandParams.category_id,
						keywords: this.brandParams.keywords,
						new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this
							.address2 ? this.address2 : '',
						lng: this.lng ? this.lng : longitude ? longitude : 0,
						lat: this.lat ? this.lat : latitude ? latitude : 0,
					}
				}).then(res => {
					if (res.statusCode == 200) {
						this.brandList = res.data.data.list.data
					}
				})
			},
			// 获取类目列表
			getNavsList() {
				let that = this
				that.$request({
					url: 'common/categoryList'
				}).then(res => {
					if (res.statusCode == 200) {
						res.data.data.unshift({
							name: "全部门店",
							id: 502
						})
						that.navsList = res.data.data
					}

				})
			},
			//选择城市
			getCitys(citys) {
				this.$store.commit('positionText', citys.name)
				this.$store.commit('lat', citys.lat)
				this.$store.commit('lng', citys.lng)
				let selectedAddress = citys.mergename?citys.mergename[2]:citys.name
				this.$store.commit('selectedAddress', selectedAddress)
				this.$rangeObj(selectedAddress)
			}
		}
	}
</script>

<style scoped lang="scss">
	.store {
		background-color: #f4f4f4;
		overflow: hidden;

		.fenlei_box {
			width: 96rpx;
			height: 38rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 18.75%);
		}

		.fu_chuang {
			width: 750upx;
			height: 1624upx;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			z-index: 99999;

			.c_fu_chuang {
				width: 686upx;
				background: #FFFFFF;
				border-radius: 24upx 24upx 24upx 24upx;
				margin-top: 382upx;

				.c_fu_txt_box {
					flex-wrap: wrap;
					padding-top: 34upx;
					padding-bottom: 8upx;

					.list_txt {
						margin-left: 46upx;
						margin-bottom: 30upx;

						.fu_txt {
							color: #333;
						}
					}
				}
			}
		}

		.city {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			width: 60rpx;

		}

		.search {
			width: 702rpx;
			height: 64rpx;
			margin: 0 auto;
			margin-bottom: 24rpx;
			align-items: center;
			justify-content: space-evenly;

			.tips {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 600;
				font-size: 30rpx;
				color: #333333;
				margin-right: 24rpx;
			}

			.search_box {
				display: flex;
				align-items: center;
				border: 2rpx solid #FEBCBA;
				padding: 0 30rpx;
				flex: 1;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.67);
				border-radius: 16px;

				input {
					width: 100%;
					height: 100%;
					font-size: 26rpx;
				}

				.line {
					width: 2rpx;
					height: 20rpx;
					background-color: #E2C194;
					margin: 0 20rpx;
				}
			}

		}

		.banner {
			width: 702rpx;
			margin: 0 auto;
			margin-bottom: 40rpx;
			height: 204rpx;
			border-radius: 20rpx;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			line-height: 204rpx;
		}

		.allbrand {
			margin: 0 auto;
			margin-bottom: 40rpx;
			width: 688rpx;
			border-radius: 20rpx;

			.title {
				margin-bottom: 32rpx;
			}

			.title_left {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 600;
				font-size: 30rpx;
				color: #333333;
			}

			.title_right {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
			}

			.title {
				margin-bottom: 32rpx;
			}

			.title_left {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 600;
				font-size: 30rpx;
				color: #333333;
			}

			.title_right {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
			}
		}

		.brandList {
			margin: 0 auto;
			margin-bottom: 40rpx;
			width: 688rpx;
			border-radius: 20rpx;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			padding: 32rpx 12rpx;

			.title {
				margin-bottom: 32rpx;
			}

			.title_left {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 600;
				font-size: 30rpx;
				color: #333333;
			}

			.title_right {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
			}

			.item {
				width: 126rpx;
				height: 164rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 12rpx;
				.head {
					width: 126rpx;
					height: 126rpx;
					background-color: #ccc;
					border-radius: 50%;
				}

				.name {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
			}

			.item1 {
				width: 144rpx;
				height: 110rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 30rpx;

				.head1 {
					width: 144rpx;
					height: 60rpx;
					background-color: #ccc;
					border-radius: 164rpx;
				}

				.name1 {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
			}
		}

		.xiding {
			position: fixed;
			top: 250rpx;
			z-index: 9999;
			overflow: hidden;
		}

		.brand_box {
			position: relative;
			.brand_item {
				height: 190rpx;
				width: 702rpx;
				padding: 0 24rpx;
				background: #FFFFFF;
				border-bottom: 16rpx solid #F4F4F4;
				position: relative;
				display: flex;
				align-items: center;
				.center {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 126rpx;

					.item_title {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

				}

				.num {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;

				}
			}
		}

		.active_item {
			background: url('@/static/store/fenglei3.png')right bottom no-repeat;
			background-size: 70%;
		}
	}
</style>